<template>
	<!-- 高级 -->
	<view class="" :class="{'page-bg':isSearch}">
		<view :style="{'background':  bg}" class="my-head">
			<view>
				<u-icon name="close" :color="color" @click="fnReturn"></u-icon>
			</view>
			<view class="title">
				高级筛选
			</view>
			<view class="head-right  fl-t">
				<!-- 高级搜索 -->
			</view>
		</view>
		<view class="occupy"></view>
		<view class="boxCla">
			<view class="content-box">
				<view class="options">
					<view class="options-content" v-for="(item, index) in arr" :key="index" @click="opens(item, index)">
						<view class="oc-left">
							{{item.title}}
						</view>
						<view class="oc-right">
							<view class="text" v-if="item.title == '求职状态'">
								{{arrData[index].EnCode ? `已选择（${arrData[index].EnCode.length}）` : "请选择"}}
							</view>
							<view class="text" v-else>
								{{arrData[index].value ? arrData[index].value : "请选择"}}
							</view>
							<view class="icons">
								<u-icon name="arrow-right" color="#353535" size="18"
									style="display: inline-block; margin-left: 21rpx;"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<!-- 多列模式 -->
				<!-- 		<u-picker 
				:show="show" 
				ref="uPicker"
				:columns="columns" 
				keyName="FullName"
				@confirm="confirm" 
				@cancel="cancelChoose"
				closeOnClickOverlay 
				@close="close"
				@change="changeHandler"
				:defaultIndex="defaind ? defaind : [0]"
			></u-picker> -->
				<uni-data-picker :localdata="colum" v-model="zwVal" class="unidatapickert" popup-title="请选择期望职位"
					ref="picker" @change="onchange">
				</uni-data-picker>
				<!-- :defaultIndex="[1]" -->
				<u-picker :show="showd" ref="uPickerd" :columns="columnData" keyName="FullName" @confirm="confirm"
					@cancel="cancelChoose" closeOnClickOverlay @close="close"
					:defaultIndex="defaind ? defaind : [0]"></u-picker>

				<u-popup :show="chShow" @close="chClose" @open="chOpen" closeable closeOnClickOverlay
					safeAreaInsetBottom safeAreaInsetTop>
					<view class="popup-multiple">
						<u-checkbox-group v-model="arrData[1].lable" iconPlacement="right" placement="row"
							class="multiple" @change="checkboxChange">
							<u-checkbox v-for="(item, index) in $store.state.qiuzhi" :key="index" activeColor="#2979FF"
								:label="item.FullName" :name="item.EnCode"></u-checkbox>
							<!-- 	<u-checkbox activeColor="#2979FF" label="不限" name="不限"></u-checkbox>
						<u-checkbox activeColor="#2979FF" label="离职-随时到岗" name="离职-随时到岗"></u-checkbox>
						<u-checkbox activeColor="#2979FF" label="在职-暂不考虑" name="在职-暂不考虑"></u-checkbox>
						<u-checkbox activeColor="#2979FF" label="在职-考虑机会" name="在职-考虑机会"></u-checkbox>
						<u-checkbox activeColor="#2979FF" label="在职-月内到岗" name="在职-月内到岗"></u-checkbox> -->
						</u-checkbox-group>
					</view>
				</u-popup>
			</view>
		</view>
		<view class="bottom_bar  fl-lr-c">
			<view class="but1" @click="resetChange">
				重置
			</view>
			<view class="but2 fl-c" @click="confirmChange">确认搜索</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSearch: false,

				value: "",
				checked: [],
				show: false,
				showd: false,
				chShow: false,
				inds: null,
				columns: [
					[],
					[],
					[]
				],
				columnData: [],
				arrData: [{
						title: "职位类别",
						value: "",
						lable: "",
						EnCode: null,
					},
					{
						title: "求职状态",
						value: "",
						lable: "",
						EnCode: null,
					},
					{
						title: "工作经验",
						value: "",
						lable: "",
						EnCode: null,
					},
					{
						title: "期望薪资",
						value: "",
						lable: "",
						EnCode: null,
					},
					{
						title: "学历",
						value: "",
						lable: "",
						EnCode: null,
					},
					{
						title: "性别",
						value: "",
						lable: "",
						EnCode: null,
					},
					{
						title: "工作性质",
						value: "",
						EnCode: null,
					},
					{
						title: "年龄",
						value: "",
						lable: "",
						EnCode: null,
					},
				],
				defaind: null,
				zwVal: '2',
			}
		},
		created() {

		},
		onLoad() {
			let arrData = [{
					title: "职位类别",
					value: "",
					lable: "",
					EnCode: null,
				},
				{
					title: "求职状态",
					value: "",
					lable: "",
					EnCode: null,
				},
				{
					title: "工作经验",
					value: "",
					lable: "",
					EnCode: null,
				},
				{
					title: "期望薪资",
					value: "",
					lable: "",
					EnCode: null,
				},
				{
					title: "学历",
					value: "",
					lable: "",
					EnCode: null,
				},
				{
					title: "性别",
					value: "",
					lable: "",
					EnCode: null,
				},
				{
					title: "工作性质",
					value: "",
					EnCode: null,
				},
				{
					title: "年龄",
					value: "",
					lable: "",
					EnCode: null,
				},
			]
			this.arrData = arrData
		},
		props: {
			bg: {
				type: String,
				default: "#fff"
			},
			region: { //定位
				type: Array,
				default () {
					return []
				}
			},
			color: {
				type: String,
				default: "#000"
			},
		},
		watch: {
			"$store.state.screeningData": {
				handler(val) {
					if (val) {
						this.arrData = JSON.parse(JSON.stringify(val))
					}
				},
				immediate: true
			}
		},
		computed: {
			colum() {
				return this.subTree(this.$store.state.industry)
			},
			arr() {
				return [{
						title: "职位类别",
						value: "",
						textData: this.$store.state.industry
					},
					{
						title: "求职状态",
						value: "",
						textData: this.$store.state.qiuzhi
					},
					{
						title: "工作经验",
						value: "",
						textData: this.$store.state.jingyan
					},
					{
						title: "期望薪资",
						value: "",
						textData: this.$store.state.salary
					},
					{
						title: "学历",
						value: "",
						textData: this.$store.state.xeuli
					},
					{
						title: "性别",
						value: "",
						textData: [{
								FullName: "不限",
								EnCode: null,
								children: []
							},
							{
								FullName: "男",
								EnCode: 1,
								children: []
							},
							{
								FullName: "女",
								EnCode: 2,
								children: []
							}
						]
					},
					{
						title: "工作性质",
						value: "",
						textData: this.$store.state.leixing
					},
					{
						title: "年龄",
						value: "",
						textData: this.$store.state.nianling
					},
				]
			}
		},
		methods: {
			fnReturn() {
				uni.navigateBack();
			},
			opens(item, index) {
				console.log(item)
				this.inds = index
				if (item.title == "求职状态") {
					this.chShow = true
				} else if (item.title == "职位类别") {
					// this.columns = [item.textData]
					// this.columns.push(item.textData[0].Children)
					// this.columns.push(item.textData[0].Children[0].Children)
					// console.log(this.columns)
					// this.show = true
					this.$refs.picker.show()
				} else {
					this.defaind = this.arrData[index].lable
					this.columnData = [item.textData]
					this.showd = true
				}
			},
			// 选择器点击确定事件
			confirm(e) {
				console.log('confirm', e)
				this.arrData[this.inds].value = e.value.at(-1).FullName
				this.arrData[this.inds].EnCode = e.value.at(-1).EnCode
				this.arrData[this.inds].lable = e.indexs
				this.show = false
				this.showd = false
			},
			confirmd(e) {
				this.showd = false
			},
			// 选择器点击取消事件
			cancelChoose(e) {
				this.show = false
				this.showd = false
			},
			// 选择器点击遮罩关闭
			close(e) {
				this.show = false
				this.showd = false
			},
			// 选择器多列模式
			// changeHandler(e) {
			// 	console.log(e)
			// 	// return
			// 	const {
			// 		columnIndex,
			// 		value,
			// 		values, // values为当前变化列的数组内容
			// 		index,
			// 		indexs,
			// 		// 微信小程序无法将picker实例传出来，只能通过ref操作
			// 		picker = this.$refs.uPicker
			// 	} = e
			// 	// 当第一列值发生变化时，变化第二列(后一列)对应的选项
			// 	if (columnIndex === 0) {
			// 		// picker为选择器this实例，变化第二列对应的选项
			// 		picker.setColumnValues(1, this.$store.state.industry[index].Children)
			// 		picker.setColumnValues(2, this.$store.state.industry[indexs[0]].Children[0].Children)
			// 	}else if (columnIndex === 1) {
			// 		// picker为选择器this实例，变化第三列对应的选项
			// 		picker.setColumnValues(2, this.$store.state.industry[indexs[0]].Children[indexs[1]].Children)
			// 	}
			// },
			subTree(arr, fatherArr) {
				let totalArr;
				if (fatherArr !== undefined) {
					totalArr = fatherArr.children
				} else {
					totalArr = []
				}
				if (arr) {
					arr.forEach((item, index) => {
						let obj = {}
						obj.text = item.FullName
						obj.value = item.Id
						obj.children = [];
						if (item.Children !== null && item.Children.length != 0) {
							this.subTree(item.Children, obj)
						}
						totalArr.push(obj)
					})
				}

				return totalArr
			},
			onchange(e) {
				// this.Category1 = ""
				// this.Category2 = ""
				// this.Category3 = "";

				console.log("e", e);

				let OrgId = e.detail.value[e.detail.value.length - 1].value
				console.log("OrgId", OrgId);
				this.arrData[this.inds].EnCode = OrgId
				let Orgvalue = e.detail.value[e.detail.value.length - 1].text
				console.log("Orgvalue", Orgvalue);
				this.arrData[this.inds].value = Orgvalue

				// if (e.detail.value.length == 3) {
				// 	this.Category1 = e.detail.value[0].value
				// 	this.Category2 = e.detail.value[1].value;
				// 	this.Category3 = e.detail.value[2].value;
				// }
				// if (e.detail.value.length == 2) {
				// 	this.Category1 = e.detail.value[0].value;
				// 	this.Category2 = e.detail.value[1].value;
				// }
				// if (e.detail.value.length == 1) {
				// 	this.Category1 = e.detail.value[0].value;
				// }

				// this.zwValid = OrgId;
				// this.zwValzhi = Orgvalue;

			},

			chOpen() {
				// console.log('open');
			},
			chClose() {
				this.chShow = false
				// console.log('close');
			},
			checkboxChange(n) {
				// console.log('change', n);
				this.arrData[1].EnCode = n
				this.arrData[1].lable = n
			},
			// 重置 
			resetChange() {
				this.arrData.forEach(ite => {
					ite.value = "",
						ite.lable = "",
						ite.EnCode = null
				})
			},
			confirmChange() {
				console.log(this.arrData, '数据------------')
				this.$store.commit('setScreeningData', this.arrData)
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-bg {
		width: 100%;
		min-height: 100vh;
		background-color: #f9f9f9;
	}

	.occupy {
		height: calc(88rpx + var(--status-bar-height));
	}

	.my-head {
		position: fixed;
		top: 0;
		width: 100%;
		padding: var(--status-bar-height) 30rpx 0 30rpx;
		height: calc(88rpx + var(--status-bar-height));
		display: flex;
		//justify-content: space-between;  
		align-items: center;
		box-sizing: border-box;
		z-index: 999;


		.title {
			flex: 1;
			text-align: center;
		}

		.head-right {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			width: 70rpx;
		}
	}

	.boxCla {
		display: flex;
		justify-content: center;

		.content-box {
			// padding: 0 30rpx;
			width: 95%;
			margin-top: 10rpx;
			// height: calc(100vh - 98rpx);
			// box-sizing: border-box;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			background-color: #FFFFFF;

			/deep/.u-collapse {
				.u-collapse-item {
					.u-cell {
						.u-cell__body {
							height: 120rpx;

							.u-cell__body__content {
								font-size: 28rpx;
								font-weight: 400;
								color: #000000;
							}

							.u-page__item__title {
								font-size: 28rpx;
								font-weight: 400;
								color: #999999;
							}
						}
					}

					.multiple {
						margin: 50rpx 0;
						display: flex;
						flex-direction: column;

						.u-checkbox {
							margin-bottom: 16px;
							padding-bottom: 8px;
							border-bottom: 0.5px solid #D6D7D9;
						}
					}
				}
			}

			.options {
				.options-content {
					display: flex;
					justify-content: space-between;
					margin: 0 40rpx 0 30rpx;
					border-bottom: 1px solid #F1F2F6;
					height: 120rpx;
					line-height: 120rpx;

					.oc-left {
						font-size: 28rpx;
						font-weight: 400;
						color: #000000;
					}

					.oc-right {
						max-width: 300rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
						display: flex;

						.text {
							// display: inline-block;
							overflow-y: auto;
							// line-height: 120rpx;
						}

						.icons {
							// display: inline-block;
							line-height: 120rpx;
						}
					}
				}
			}

			.popup-multiple {
				margin: 100rpx 0 40rpx;
				padding: 0 20rpx;
				height: 400rpx;
				overflow-y: auto;

				.multiple {
					display: flex;
					flex-direction: column;

					.u-checkbox {
						margin-bottom: 16px;
						padding-bottom: 8px;
						border-bottom: 0.5px solid #D6D7D9;
					}
				}
			}

			.unidatapickert {
				position: fixed;
				left: -5000px;
				z-index: 99;
			}
		}
	}

	.bottom_bar {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;

		.but1 {
			// border: 1rpx solid #1684FC;
			border-radius: 10rpx;
			width: 210rpx;
			height: 88rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #5C5C5C;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			background: #F7F8FA;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.but2 {
			width: 450rpx;
			height: 88rpx;
			background: #1684FC;
			border-radius: 10rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>